<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .layout1{
            /* margin 清除边框外的区域,外边距是通明的*/
            margin: 20px;
            /* border 围绕在内边距和内容外的边框  solid:实线*/
            border: 20px solid blue;
            /* padding 清除内容周围区域,内边距是透明的 */
             padding: 20px;
             /* Content 盒子的内容,显示文本和图像 */
             content: 2000;
        }
       /* Css3弹性盒内容：弹性盒子由弹性容器FLex container和弹性子元素Flex item组成 弹性容器通过设置display属性的值为flex将其定义为弹性容器 弹性容器内包含了一个或多个弹性子元素 */
       .layout{
        width: 500px;
        height: 500px;
        background-color: #555;

        /* display:flex;  开启弹性盒  属性设置后子元素默认水平排列 */
        display: flex;

        /*justify-content  内容对齐属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线对齐
          :flex-start 弹性项目向行头紧挨着填充，这个是默认值，第一个弹性项的main-start外边距边线被设置在该行的main-start边线，而后续弹性项依次平齐摆放
          ：flex-end  弹性项目向行尾紧挨着填充，第一个弹性项的main-en外边距边线被放置在该行的main-end边线，而后续性项一次平齐拜访
          ：center 弹性项目居中紧挨着填充（如果剩余的自由控件是负的则弹性项目将在两个方向上同时溢出） 
        */
        justify-content: center;


        /* align-items  flex-start 居左 flex-end 居右   center 居中 */
         align-items:center;

        
        /* flex-direction ：属性指定了弹性子元素在父容器中的位置
           ：row  横向从左到右排列（左对齐），默认的排列方式
           ：row-reverse  反转横向排列（右对齐，从后往前排，最后一项排在最前面）
           ：column   纵向排列，从上往下排，最后一项排在最下面
           ：column-reverse  反转纵向排列，从下往上排，最后一项排在最上面
        
        */
        flex-direction: column;



       }
       .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        /* 子元素上的属性  根据弹性盒子元素所设置的扩展因子作为比率来分配剩余控件  权重  flex-grow  flex  后面width不生效*/
        flex:3;
        flex-grow: 3;


       }
         .box2{
        width: 100px;
        height: 100px;
        background-color: green;
       }
         .box3{
        width: 100px;
        height: 100px;
        background-color: blue;
       }







    </style>


</head>
<body>
    <div class="layout1"></div>

  <div class="layout">
       <div class="box1"></div>
       <div class="box2"></div>
       <div class="box3"></div>
  </div>

    
</body>
</html>